<template>
  <div class="informationDetails">
    <div class="goBack" @click="goBack"></div>
    <div
      :style="{
        position: 'fixed',
        width: '90%',
        height: '90%',
        filter: 'blur(30px)',
        backgroundColor: 'rgba(0,0,0,.5)',
        backgroundImage: `url(${bgcImg})`,

        zIndex: -1,
      }"
    ></div>
    <div class="infomatDet-box" id="infomatDet-box">
      <div class="infomatDet-left" v-if="getDetailParamsName == 'album'">
        <div class="left-top">
          <div class="left-top-img">
            <!-- <img
              class="auto-img"
              :src="InformationDetailsData.blurPicUrl"
              alt=""
            /> -->
            <img
              v-lazy="InformationDetailsData.blurPicUrl"
              :key="InformationDetailsData.blurPicUrl"
              class="auto-img"
            />
          </div>
          <div class="left-top-text">
            <div class="left-album">{{ InformationDetailsData.name }}</div>
            <div class="singer">
              {{
                InformationDetailsData.length == 0
                  ? ""
                  : InformationDetailsData.artists[0].name
              }}
            </div>
            <div class="DistrbutiComp">
              发行：{{ InformationDetailsData.company }}
            </div>
            <div class="from">信息来源：网易云</div>
          </div>
        </div>
        <div class="left-bottom">{{ InformationDetailsData.description }}</div>
      </div>
      <div class="infomatDet-left" v-else>
        <div class="left-top">
          <div class="left-top-img">
            <!-- <img
              class="auto-img"
              :src="InformationDetailsData.img1v1Url"
              alt=""
            /> -->
            <img
              v-lazy="InformationDetailsData.img1v1Url" 
              :key="InformationDetailsData.img1v1Url"
              class="auto-img"
            />
          </div>
          <div class="left-top-text">
            <div class="left-album">{{ InformationDetailsData.name }}</div>
            <div class="singer singer-alias">
              {{
                InformationDetailsData.length == 0
                  ? ""
                  : InformationDetailsData.alias[0]
              }}
            </div>
            <div class="from from-alias">信息来源：网易云</div>
          </div>
        </div>
        <div class="left-bottom">{{ InformationDetailsData.briefDesc }}</div>
      </div>
      <div class="infomatDet-right">
        <div class="infomatDet-right-box">
          <div
            class="infomatDet-right-con"
            v-for="(ite, ind) in InformationData"
            :key="ind"
            @click="getURL(ite.id)"
          >
            <div class="con-name">
              <div class="name">{{ ite.name }}</div>
              <div class="singer">
                {{ InformationData.length == 0 ? "" : ite.ar[0].name }}
              </div>
            </div>
            <div class="con-list">
              <div class="con-list-item item0">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="加入喜欢列表"
                  placement="top"
                >
                  <img
                    class="auto-img"
                    :src="require('../../assets/image/icon/shoucang_1.png')"
                    alt=""
                  />
                </el-tooltip>
              </div>
              <div class="con-list-item item1">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="加入歌单"
                  placement="top"
                >
                  <img
                    class="auto-img"
                    :src="require('../../assets/image/icon/jiahao.png')"
                    alt=""
                  />
                </el-tooltip>
              </div>
              <div
                class="con-list-item item2"
                @click.stop="JOinPlayList(ite.id)"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="加入播放列表"
                  placement="top"
                >
                  <img
                    class="auto-img"
                    :src="require('../../assets/image/icon/liebiao.png')"
                    alt=""
                  />
                </el-tooltip>
              </div>
              <div
                class="con-list-item item3"
                @click.stop="downloadMusic(ite.id, ite.name)"
              >
                <DownLoad ref="mychild" />
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="下载"
                  placement="top"
                >
                  <img
                    class="auto-img"
                    :src="require('../../assets/image/icon/xiazai.png')"
                    alt=""
                  />
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInformationDetailsInfo, getURLInfo } from "@/Api/seachApi";
import DownLoad from "@/components/publicCompontents/DownLoad";
export default {
  name: "InformationDetails",
  components: {
    DownLoad,
  },
  data() {
    return {
      //   信息详情数据
      InformationDetailsData: [],
      //   歌曲列表详情数据
      InformationData: [],

      bgcImg: "",

      // 下载的歌曲名字
      musicDownLoadName: "",
    };
  },
  computed: {
    // 获取歌单详情数据
    musicListID() {
      // console.log("musicListID",this.$store.state.musicState.musicListID);
      return this.$store.state.musicState.musicListID;
    },
    // 获取audio标签
    getAudioElement() {
      return this.$store.state.musicState.audioElement;
    },
    getDetailParamsName() {
      //console.log("this.$route.params.name",this.$route.params.name);
      return this.$route.params.name || "album";
    },
    // 音乐Id
    musicID() {
      return this.$store.state.musicState.musicID;
    },
  },
  created() {
    this.getInformationDetails();
  },
  activated() {
    this.getInformationDetails();
  },
  methods: {
    goBack() {
      const loading = this.$loading({
        background: "rgba(0,0,0,0.4)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#infomatDet-box", //局部加載效果
      });
      setTimeout(() => {
        loading.close();
        this.$router.go(-1);
      }, 500);
    },
    // 获取详情
    getInformationDetails() {
      const loading = this.$loading({
        background: "rgba(0,0,0,0.4)",
        text: "正在加载中...",
        spinner: "el-icon-loading",
        target: "#infomatDet-box", //局部加載效果
      });
      if (this.getDetailParamsName == "album") {
        // 专辑详情
        getInformationDetailsInfo(this.musicListID)
          .then((res) => {
            if (res.code == 200) {
              loading.close();
              this.bgcImg = res.album.blurPicUrl;
              this.InformationDetailsData = res.album;
              this.InformationData = res.songs;
            }
          })
          .catch((err) => {
            loading.close();
            // console.log(err);
          });
      } else if (this.getDetailParamsName == "singer") {
        // 获取歌手详情
        this.axios({
          method: "GET",
          // url: "http://musicapi.leanapp.cn/artists?id=" + this.musicListID,
          url: "https://autumnfish.cn/artists?id=" + this.musicListID,
        })
          .then((res) => {
            // console.log(res);
            if (res.data.code == 200) {
              loading.close();
              this.InformationDetailsData = res.data.artist;
              this.InformationData = res.data.hotSongs;
              //下载的歌曲名字
              // this.musicDownLoadName = res.data.hotSongs[0].name;
            }
          })
          .catch((err) => {
            loading.close();
            // console.log(err);
          });
      }
    },

    // 点击播放
    getURL(id) {
      if (this.musicID === id) {
        return;
      }
      this.$store.commit("musicState/isClickPlay", false);

      getURLInfo({ id: id })
        .then((res) => {
          // console.log(res);

          if (res.code == 200) {
            this.$store.commit("musicState/audioSrc", res.data[0].url);
            this.$store.commit("musicState/SetMusicID", id);
            this.$store.commit("musicState/SetMusicPlayListData", id);
            setTimeout(() => {
              this.$store.commit("musicState/isClickPlay", true);
              this.getAudioElement.play();
            }, 800);
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 加入播放列表
    JOinPlayList(uid) {
      // 加入播放列表
      this.$store.commit("musicState/SetMusicPlayListData", uid);
    },
    // 下载音乐
    downloadMusic(uid, MusicName) {
      this.$nextTick(() => {
        this.$refs.mychild[0].downLoad(uid, MusicName);
      });

      // this.axios({
      //   method: "GET",
      //   url: " https://autumnfish.cn/song/url?id=" + uid,
      // })
      //   .then((res) => {
      //     // console.log(res.data.data[0].url);
      //     // console.log(this.musicDownLoadName);
      //     if (res.data.data[0]) {
      //       fetch(res.data.data[0].url)
      //         .then((res) => res.blob())
      //         .then((blob) => {
      //           const a = document.createElement("a");
      //           document.body.appendChild(a);
      //           a.style.display = "none";
      //           // 使用获取到的blob对象创建的url
      //           const url = window.URL.createObjectURL(blob);
      //           a.href = url;
      //           // 指定下载的文件名
      //           a.download = this.musicDownLoadName + ".mp3";
      //           a.click();
      //           document.body.removeChild(a);
      //           // 移除blob对象的url
      //           window.URL.revokeObjectURL(url);
      //           loading.close();
      //         });
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
  },
  // 局部过滤器
  //   filters: {
  //     changeScore(n) {
  //       console.log(n)
  //       let a = new Date(n)
  //       console.log(a)
  //     //   let years = n.getFullYear()
  //     //   console.log(years)
  //     },
  //   },
};
</script>

<style lang="scss" scoped>
@import "@/styles/public.scss";
.informationDetails {
  height: 100%;
  width: 100%;
  // background-color: red;
  position: relative;

  .goBack {
    width: 50px;
    height: 50px;
    background-image: url("../../assets/image/icon/fanhui.png");
    background-size: 100%;
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: pointer;
    &:hover {
      background-image: url("../../assets/image/icon/fanhui1.png");
      background-size: 100%;
    }
  }
  .infomatDet-box {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    box-sizing: border-box;
  }
  .infomatDet-left {
    flex: 7;
    // background-color: red;
    box-sizing: border-box;
  }
  .left-top {
    height: 380px;
    width: 100%;
    padding: 30px 10px;
    box-sizing: border-box;
    //   background-color: #fff;

    .left-top-img {
      float: left;
      width: 300px;
      height: 300px;
      margin-left: 150px;
      border-radius: 20px;
      overflow: hidden;
      // background-color: blue;
    }
    .left-top-text {
      width: 300px;
      height: 300px;
      box-sizing: border-box;
      float: left;
      padding-top: 30px;
      margin-left: 20px;
      text-align: left;
      color: rgba(255, 255, 255, 0.7);
      font-size: 22px;
      font-weight: bold;

      > div {
        margin-top: 20px;
      }
      .singer-alias {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
      }
      .from-alias {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    .left-album {
      font-size: 28px;
    }
  }
  .left-bottom {
    width: 800px;
    height: 480px;
    text-align: justify;
    text-indent: 2em;
    font-size: 22px;
    padding: 10px 100px;
    color: rgba(255, 255, 255, 0.7);

    overflow: hidden;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }
  }

  .infomatDet-right {
    height: 100%;
    width: 100%;
    min-width: 700px;
    flex: 5;
    box-sizing: border-box;
    border-radius: 20px;

    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0px;
    }
    &::-o-scrollbar {
      width: 0px;
    }
    &::-moz-scrollbar {
      width: 0px;
    }

    .infomatDet-right-box {
      padding: 10px;
    }

    .infomatDet-right-con {
      width: 100%;
      height: 70px;
      margin-top: 10px;
      background-color: rgba(255, 255, 255, 0.1);

      &:hover {
        background-color: rgba(0, 0, 0, 0.2);

        .name {
          color: #fff;
          transform: scale(1.05) translateY(5px);
          z-index: 2;
        }
      }
    }
    .con-name {
      height: 100%;
      // width: 200px;
      margin-left: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #e3e7e7;
      // background-color: red;
      float: left;
      display: flex;
      flex-flow: column;
      text-align: left;

      .name {
        font-size: 24px;
        margin-bottom: 3px;
      }
    }
    .con-list {
      height: 100%;
      line-height: 70px;
      float: right;
      margin-right: 30px;

      .con-list-item {
        display: inline-block;
        width: 30px;
        height: 30px;

        vertical-align: middle;
        margin-right: 10px;
        cursor: pointer;
        z-index: 100;
      }
    }
  }
}
</style>
